import React from 'react';
import PropTypes from 'prop-types';
import RobotPop from 'components/robotPop';
import { setIntroPointState } from 'api';
import { navigate, navigateOpen } from 'utils/router';
import { ENUM } from 'utils/constants.js';
import KEYCODE from 'utils/keycode';
import track from 'utils/track';
import './index.scss';
// import { Assistant } from '@alife/teamix-assistant';
import Assistant from 'components/libraryInsideGuide';

// const prefix = 'reviewer-recommend-guide';

const key = 'recommend_reviewer';

export default class ReviewerRecommendGuide extends React.Component {
  static propTypes = {
    onClickCancel: PropTypes.func,
  };

  static defaultProps = {
    onClickCancel: () => {},
  };

  state = {
    close: null,
    visible: false,
    hideYundou: null,
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        visible: true,
      });
    }, 4000);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyEvents);
  }

  handleKeyEvents = (e) => {
    e.stopPropagation();
    if (e.keyCode === KEYCODE.N) {
      document.removeEventListener('keydown', this.handleKeyEvents);
      this.handleCloseGuide();
    } else if (e.keyCode === KEYCODE.Y) {
      document.removeEventListener('keydown', this.handleKeyEvents);
      this.handleOk();
    }
  };

  handleCloseGuide = () => {
    const { hideYundou } = this.state;
    track({
      action: 'n_yundou',
      page: '',
      type: 'reviewer recommendation',
      control: '',
    });

    document.addEventListener('keydown', this.handleKeyEvents);
    this.setState({
      close: true,
    });
    this.props.onClickCancel(hideYundou);
    setIntroPointState(key, {
      project_id: window.FORCE.pathResource.id,
    })
      .then(() => {})
      .catch((err) => {
        console.log(err);
      });
  };

  handleOk = () => {
    const { fullPath, role } = window.FORCE.pathResource;
    const roleId = ENUM.access_level_id[role];
    const isRepoMaster = roleId >= 40;
    this.setState({
      close: true,
    });
    document.addEventListener('keydown', this.handleKeyEvents);
    setIntroPointState(key, {
      project_id: window.FORCE.pathResource.id,
    })
      .then(() => {})
      .catch((err) => {
        console.log(err);
      });
    if (isRepoMaster) {
      track({
        action: 'y_yundou',
        page: '',
        type: 'reviewer recommendation',
        control: '',
      });
      navigate(`/${fullPath}/settings/merge_requests`);
    } else {
      track({
        action: 'y_yundou',
        page: '',
        type: 'reviewer recommendation',
        control: 'help doc',
      });
      navigateOpen('https://help.aliyun.com/document_detail/206923.html', '_blank');
    }
  };

  renderContent() {
    const { role } = window.FORCE.pathResource;
    const roleId = ENUM.access_level_id[role];
    const isRepoMaster = roleId >= 40;
    return (
      <Assistant
        guide="2"
        guidePropsCount={4}
        isRepoMaster={isRepoMaster}
        isRepoMasterHander={this.handleCloseGuide}
        isRepomasterOk={this.handleOk}
        track={(action) => {
          track({ action, page: 'repo-guidance' });
        }}
      />
      // <div className={`${prefix}-container`}>
      //   <div className={`${prefix}-container-desc`}>
      //     <span dangerouslySetInnerHTML={{ __html: '不确定邀请谁评审更合适？「智能评审」可以综合数据为你推荐最合适的评审人哦，试试吗？' }} />
      //   </div>
      //   <div className={`${prefix}-container-btns`}>
      //     <div
      //       className={`${prefix}-container-btns-cancel`}
      //       onClick={() => {
      //         this.handleCloseGuide();
      //       }}
      //     >
      //       [N] 不了，谢谢
      //     </div>
      //     <div
      //       className={`${prefix}-container-btns-ok`}
      //       onClick={() => {
      //         this.handleOk();
      //       }}
      //     >
      //       {isRepoMaster ? '[Y] 去开启智能评审' : '了解一下'}
      //     </div>
      //   </div>
      // </div>
    );
  }

  render() {
    const { close, visible } = this.state;
    if (!visible) {
      return null;
    }

    return (
      <RobotPop
        close={close}
        introPointKey={key}
        introPointType={{ projectId: window.FORCE.pathResource.id }}
        description={this.renderContent()}
        shown={(hide) => {
          document.addEventListener('keydown', this.handleKeyEvents);
          this.setState({
            hideYundou: hide,
          });
        }}
      />
    );
  }
}
